<template>
	<view>
		<view class="submit">
			<view class="submit-chat">
				<view class="bt-img" @tap="records">
					<image :src="toc" mode=""></image>
				</view>
				<textarea auto-height="true" class="chat-send btn" :class="{displaynone:isrecord}" @input="inputs"
					v-model="msg" @focus="focus"></textarea>
				<view class="record btn" :class="{displaynone:!isrecord}" @touchstart="touchstart" @touchend="touchend"
					@touchmove="touchmove">
					按住说话
				</view>
				<view class="bt-img" @tap="emojis">
					<image src="../../../../static/submit/xl.png" mode=""></image>
				</view>
				<view class="bt-img" @tap="more">
					<image src="../../../../static/submit/jh.png" mode=""></image>
				</view>
			</view>
			<view class="emoji" :class="{displaynone:!isemoji}">
				<view class="emoji-send">
					<view class="emoji-send-det" @click="emojiBack">
						<image src="../../../../static/submit/tg.png" mode=""></image>
					</view>
					<view class="emoji-send-bt" @click="emojiSend">
						发送
					</view>
				</view>
				<emoji></emoji>
			</view>
			<view class="more" :class="{displaynone:!ismore}">
				<view class="more-list" @tap="sendImg('album')">
					<image src="../../../../static/submit/zp.png" mode=""></image>
					<view class="more-list-title">
						图片
					</view>
				</view>
				<view class="more-list" @tap="sendImg('camera')">
					<image src="../../../../static/submit/xj.png" mode=""></image>
					<view class="more-list-title">
						拍照
					</view>
				</view>
				<view class="more-list" @tap="chooseLocations">
					<image src="../../../../static/submit/dw.png" mode=""></image>
					<view class="more-list-title">
						定位
					</view>
				</view>
				<view class="more-list">
					<image src="../../../../static/submit/sp.png" mode=""></image>
					<view class="more-list-title">
						视频
					</view>
				</view>
				<view class="more-list">
					<image src="../../../../static/submit/wj.png" mode=""></image>
					<view class="more-list-title">
						文件
					</view>
				</view>
			</view>
		</view>
		<view class="voice-bg" :class="{displaynone:voicebg}">
			<view class="voice-bg-len">
				<view class="voice-bg-time" :style="{width:vlength/0.6+'%'}">
					{{vlength}}″
				</view>
			</view>
			<view class="voice-del">
				上滑取消录音
			</view>
		</view>
	</view>
</template>

<script setup>
	// 录音
	const recorderManager = uni.getRecorderManager();
	import emoji from '@/pages/tabbar/tabbar-4/chat/emoji.vue'
	import {
		ref
	} from "vue";
	const isrecord = ref(false) // 语音
	const isemoji = ref(false) // 表情
	const ismore = ref(false) //加号(更多功能)
	const toc = ref('../../../../static/submit/yy.png')
	const msg = ref('')
	const timer = ref('') //计时
	const vlength = ref(0) //音频时长
	const voicebg = ref(true) //音频取消
	const pageY = ref(0) // 终止y轴位置


	// 点击切换音频
	const records = () => {
		// 关闭其他项
		isemoji.value = false
		ismore.value = false
		// 内容高度获取
		setTimeout(() => {
			const query = uni.createSelectorQuery().in(this)
			query.select('.submit').boundingClientRect(data => {
				// console.log(data.height);
				uni.$emit('heights', {
					msg: data.height
				});
			}).exec()
		}, 10)
		if (isrecord.value) {
			isrecord.value = false
			toc.value = '../../../../static/submit/yy.png'
		} else {
			isrecord.value = true
			toc.value = '../../../../static/submit/jp.png'
		}
	}
	// 表情切换
	const emojis = () => {
		isemoji.value = !isemoji.value
		// 如果加号展开了 关闭加号
		ismore.value = false
		isrecord.value = false
		toc.value = '../../../../static/submit/yy.png'
		// 获取高度
		setTimeout(() => {
			const query = uni.createSelectorQuery().in(this)
			query.select('.submit').boundingClientRect(data => {
				// console.log(data.height);
				uni.$emit('heights', {
					msg: data.height
				});
			}).exec()
		}, 10)

	}
	// 文字发送
	const inputs = (e) => {
		// console.log(e.detail.value);
		var chatm = e.detail.value;
		var pos = chatm.indexOf('\n')
		// console.log(pos);
		if (pos != -1 && chatm.length > 1) {
			send(msg.value, 0);
		}
	}
	// 发送文字和表情（type==0（文字））
	const send = (msgs, type) => {
		uni.$emit('inputs', {
			message: msgs,
			types: type
		});
		setTimeout(() => {
			msg.value = '';
		}, 0)
	}
	// 输入框失去焦点的时候
	const focus = () => {
		// 关闭其他功能
		isemoji.value = false
		ismore.value = false
		// 获取高度
		setTimeout(() => {
			const query = uni.createSelectorQuery().in(this)
			query.select('.submit').boundingClientRect(data => {
				// console.log(data.height);
				uni.$emit('heights', {
					msg: data.height
				});
			}).exec()
		}, 10)
	}
	// 表情内发送
	const emojiSend = () => {
		if (msg.value.length > 0) {
			send(msg.value, 0);
		}
	}
	// 表情接收
	uni.$on('emotion', (item) => {
		// console.log(item);
		msg.value = msg.value + item;
	})
	// 表情内退格
	const emojiBack = () => {
		if (msg.value.length > 0) {
			msg.value = msg.value.substring(0, msg.value.length - 1)
		}
	}

	// 更多功能
	const more = () => {
		ismore.value = !ismore.value
		// 如果表情展开了 关闭表情
		isemoji.value = false
		isrecord.value = false
		toc.value = '../../../../static/submit/yy.png'
		// 获取高度
		setTimeout(() => {
			const query = uni.createSelectorQuery().in(this)
			query.select('.submit').boundingClientRect(data => {
				// console.log(data.height);
				uni.$emit('heights', {
					msg: data.height
				});
			}).exec()
		}, 10)
	}

	// 图片发送
	const sendImg = (e) => {
		let count = 9;
		if (e == "album") {
			count = 9
		} else {
			count = 1
		}
		uni.chooseImage({
			count: count, //默认9
			sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			sourceType: [e], //从相册选择
			success: function(res) {
				const filePaths = res.tempFilePaths
				for (let i = 0; i < filePaths.length; i++) {
					send(filePaths[i], 1)
				}
			}
		});
	}

	// 音频处理
	// 开始录制
	const touchstart = (e) => {
		// console.log(e.changedTouches[0].pageY);
		// 点击y轴位置
		pageY.value = e.changedTouches[0].pageY
		console.log("开始");
		voicebg.value = false;
		let i = 1
		timer.value = setInterval(() => {
			vlength.value = i
			console.log(i);
			i++
			if (i > 59) {
				// 结束计时
				clearInterval(timer.value)
				touchend()
			}
		}, 1000)
		recorderManager.start();
	}
	// 结束录制
	const touchend = () => {
		console.log("结束");
		clearInterval(timer.value)
		recorderManager.stop();
		recorderManager.onStop((res) => {
			let data = {
				voice: res.tempFilePath,
				time: vlength.value
			}
			if (!voicebg.value) {
				send(data, 2)
			}
			// 时长归位
			vlength.value = 0
			voicebg.value = true;
			// console.log('recorder stop' + JSON.stringify(res));
			// self.voicePath = res.tempFilePath;
		});
	}
	// 滑动终止录音
	const touchmove = (e) => {
		if (pageY.value - e.changedTouches[0].pageY > 100) {
			// console.log('delect');
			// 关闭录音组件
			voicebg.value = true;
		}
	}
	// 定位
	const chooseLocations = () => {
		console.log(11111);
		uni.chooseLocation({
			success: (res) => {
				let data = {
					name: res.name,
					address: res.address,
					latitude: res.latitude,
					longitude: res.longitude
				}
				// json转json字符串
				let stringData = JSON.stringify(data)
				send(stringData, 3)
				// console.log('位置名称：' + res.name);
				// console.log('详细地址：' + res.address);
				// console.log('纬度：' + res.latitude);
				// console.log('经度：' + res.longitude);
			}
		});
	}
</script>

<style lang="scss" scoped>
	.submit {
		background: rgba(244, 244, 244, 0.96);
		border-top: 1rpx solid rgba(0, 0, 0, 0.1);
		width: 100%;
		position: fixed;
		bottom: 0;
		z-index: 10002;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.submit-chat {
		width: 100%;
		display: flex;
		align-items: flex-end;
		box-sizing: border-box;
		padding: 14rpx 14rpx;

		image {
			width: 56rpx;
			height: 56rpx;
			margin: 0 10rpx;
			flex: auto;
		}

		.btn {
			flex: auto;
			background-color: #fff;
			border-radius: 10rpx;
			padding: 20rpx;
			max-height: 160rpx;
			margin: 0 10rpx;
		}

		.chat-send {
			line-height: 44rpx;
			font-size: 30rpx;
		}

		.record {
			line-height: 44rpx;
			text-align: center;
			font-size: 32rpx;
			color: rgba(39, 40, 50, 0.6);
		}

	}

	.displaynone {
		display: none;
	}

	.emoji {
		width: 100%;
		height: 460rpx;
		background: rgba(236, 237, 238, 1);
		box-shadow: 0rpx -1rpx 0rpx 0rpx rgba(0, 0, 0, 0.1);

		.emoji-send {
			width: 280rpx;
			height: 104rpx;
			padding-top: 24rpx;
			background: rgba(236, 237, 238, 0.9);
			position: fixed;
			bottom: env(safe-area-inset-bottom);
			right: 0;
			display: flex;

			.emoji-send-bt {
				flex: 1;
				margin: 0 32rpx 0 20rpx;
				height: 80rpx;
				background: rgba(255, 228, 49, 1);
				font-size: 32rpx;
				text-align: center;
				line-height: 80rpx;
				border-radius: 12rpx;
			}

			.emoji-send-det {
				flex: 1;
				margin-left: 24rpx;
				height: 76rpx;
				background: #fff;
				font-size: 32rpx;
				text-align: center;
				line-height: 80rpx;
				padding-top: 4rpx;
				border-radius: 12rpx;

				image {
					width: 42rpx;
					height: 32rpx;
				}
			}
		}
	}

	.more {
		width: 100%;
		height: 436rpx;
		background: rgba(236, 237, 238, 1);
		box-shadow: 0rpx -1rpx 0rpx 0rpx rgba(0, 0, 0, 0.1);
		bottom: env(safe-area-inset-bottom);
		padding: 8rpx 20rpx;
		box-sizing: border-box;

		.more-list {
			width: 25%;
			text-align: center;
			float: left;
			margin-top: 32rpx;

			image {
				width: 72rpx;
				height: 72rpx;
				padding: 24rpx;
				background: rgba(255, 255, 255, 1);
				border-radius: 24rpx;
			}

			.more-list-title {
				font-size: 24rpx;
				color: rgba(39, 40, 50, 0.5);
				line-height: 34rpx;
			}
		}
	}

	.voice-bg {
		height: 100%;
		width: 100%;
		background-color: rgba(0, 0, 0, 0.3);
		position: fixed;
		top: 0;
		bottom: 0;
		z-index: 10001;

		.voice-bg-len {
			height: 84rpx;
			width: 600rpx;
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			margin: auto;
			background-color: rgba(255, 255, 255, 0.2);
			border-radius: 42rpx;
			text-align: center;
		}

		.voice-bg-time {
			display: inline-block;
			min-width: 120rpx;
			line-height: 84rpx;
			background: #ffe431;
			border-radius: 42rpx;
		}

		.voice-del {
			position: absolute;
			bottom: 148rpx;
			margin-bottom: env(safe-area-inset-bottom);
			width: 100%;
			text-align: center;
			color: #fff;
			font-size: 28rpx;
		}
	}
</style>